<template>
	<view>
		<up-navbar title="考试列表" :autoBack="true" safeAreaInsetTop placeholder>
		<!-- 	<template #center>
				<view>
					<up-search placeholder="考试搜索" v-model="search" :showAction="false"></up-search>
				</view>
			</template> -->
		</up-navbar>

		<!-- tab切换 -->
		<!-- <up-tabs :list="tabList" @click="click"></up-tabs> -->

		<view class="list-box">
			<view class="list pad-30" v-for="(item,index) in infoList" :key="index">
				<view class="flex">
					<view>
						<image class="image" :src="baseUrl + item.image"></image>
					</view>
					<view class="mar-left-20 flex-w">
						<view class="font-32">{{item.title}}</view>
						<view class="font-26 mar-top-20">{{item.cate_title}}</view>
						<view class="button-box">
							<view @click="hanldeAnswer(item.id)" class="button radius20 font-24">答题</view>
						</view>
					</view>
				</view>
				<up-line margin="30rpx 0 0 0"></up-line>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	// 接口引入
	import {
		testList
	} from '/config/api.js';

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		baseUrl
	} from '@/common/config.js'

	// 搜索字段
	const search = ref('');
	// tab 数据
	const tabList = reactive([{
			name: '当前考试'
		},
		{
			name: '历史考试'
		},
		{
			name: '错题本'
		},
	]);

	// 列表数据
	const infoList = ref([]);
	const getPageList = () => {
		testList().then(res => {
			infoList.value = res.data.data;
		})
	}

	const hanldeAnswer = (id) => {
		uni.navigateTo({
			url: '/pages/answer/answer?id=' + id
		})
	}

	onLoad(() => {
		getPageList();
	})
</script>

<style scoped lang="scss">
	.list-box {
		.image {
			display: block;
			width: 240rpx;
			height: 150rpx;
		}

		.button-box {
			display: flex;
			justify-content: flex-end;
		}

		.button {
			background-color: #d43c33;
			color: #fff;
			padding: 12rpx 40rpx;
		}
	}
</style>